import React, { PureComponent } from "react";
import { Collapse, Button, Row, Col, Spin } from "antd";
import { connect } from "dva";
import styles from "./index.less";
import FlowDataDetail from "../../components/flowdataDetail";

const { Panel } = Collapse;
const isTrue = true;
const defaultDesc = "---";

@connect(({ loading, PageNotice }) => ({
  loading,
  noticeDetail: PageNotice.noticeDetail,
}))
class NoticeFlowDetail extends PureComponent {
  componentDidMount() {
    this.getNoticeDetail();
  }

  componentDidUpdate(preProps) {
    const {
      location: {
        query: { actionId = "" },
      },
    } = this.props;
    const {
      location: {
        query: { actionId: preActionId },
      },
    } = preProps;
    if (actionId !== preActionId) {
      this.getNoticeDetail();
    }
  }

  getNoticeDetail = () => {
    const {
      location: {
        query: { actionId = "" },
      },
      dispatch,
    } = this.props;
    if (!actionId) return;
    dispatch({
      type: "PageNotice/getNoticeDetail",
      payload: { id: actionId },
    }).then(({ errCode }) => {
      if (errCode === 0) {
        // 消息已读 更新通知列表
        const params = { pageNum: 1, pageSize: 10, status: 0 };
        dispatch({ type: "PageNotice/getNoticeList", payload: params });
      }
    });
  };

  handleExit = () => {
    const { history } = this.props;
    // history.push('/home');
    history.goBack();
  };

  render() {
    const { noticeDetail, loading } = this.props;
    const detailData = noticeDetail || {};
    const receiverLoading =
      loading.effects["appListMenu/getAppListData"] || false;
    return (
      <div className={styles.content}>
        <div style={{ minHeight: window.innerHeight - 64 - 20 - 20 - 45 }}>
          <Collapse defaultActiveKey={["2"]}>
            <Panel header="流程下发通知" key="1">
              <Spin spinning={receiverLoading}>
                <Row>
                  <Col span={8} className={styles.item_col}>
                    <span className={styles.lable}>下发人：</span>
                    <span className={styles.hiddenword}>
                      {detailData.senderName || defaultDesc}
                    </span>
                  </Col>
                  <Col span={8} className={styles.item_col}>
                    <span className={styles.lable}>下发时间：</span>
                    <span className={styles.hiddenword}>
                      {detailData.createTime || defaultDesc}
                    </span>
                  </Col>
                  <Col span={8} className={styles.item_col}>
                    <span className={styles.lable}>下发流程：</span>
                    <span className={styles.hiddenword}>
                      {detailData.processName || defaultDesc}
                    </span>
                  </Col>
                </Row>
                <Row style={{ marginTop: 16 }}>
                  <Col span={24} className={styles.item_col}>
                    <span className={styles.lable}>下发说明：</span>
                    <span className={styles.desc}>
                      {detailData.description || defaultDesc}
                    </span>
                  </Col>
                </Row>
              </Spin>
            </Panel>
            <Panel header="流程单详情" key="2" className={styles.flowdetail}>
              <FlowDataDetail hiddenBtn={isTrue} />
            </Panel>
          </Collapse>
        </div>
        <div className={styles.btns}>
          <Button onClick={this.handleExit}>返回</Button>
        </div>
      </div>
    );
  }
}

export default NoticeFlowDetail;
